<script lang="ts" setup>
import bg from 'public/img/banner.png'
import { getCategoryList } from '~/api/home'
import { decode, encode } from '~/utils/base/dataEncry'

const props = defineProps({
  type: {
    type: String,
    default: () => [],
  },
  value: {
    type: String,
    default: () => [],
  },

})
const emit = defineEmits<{
  (e: 'clickItem', item: any, item1: any): void
}>()
const inputVal = ref('')
const optionType = ref('全部')
const showCondition = ref(true)
const list = ref<any[]>([])
const list1 = ref<any[]>([])
const list2 = ref<any[]>([])
const list3 = ref<any[]>([])
const list4 = ref<any[]>([])
const searchValue = ref('')
const filterModel = ref()
const route = useRoute()
const filterList = [{
  label: '类型',
  value: '',
  key: 'sscope',
  type: 'array',
  options: [
    {
      label: '标题',
      value: 'title',
    },
    {
      label: '内容',
      value: 'content',
    },
    {
      label: '来源',
      value: 'source',
    },
    {
      label: '作者',
      value: 'author',
    },
    {
      label: '概要',
      value: 'summary',
    },
  ],
}, {
  label: '日期',
  value: '',
  key: 'tdate',
  type: 'string',
  dateRange: true,
  options: [
    {
      label: '近一周',
      value: '过去1周',
    },
    {
      label: '近一月',
      value: '过去1月',
    },
    {
      label: '近半年',
      value: '近半年',
    },
    {
      label: '一年内',
      value: '一年内',
    },
    // {
    //   type: 'dateRange',
    // },
  ],
}, {
  label: '类别',
  value: '',
  type: 'array',
  key: 'fclass',
  options: [
    {
      label: '头条资讯',
      value: '头条资讯',
    },
    {
      label: '健康陕西',
      value: '健康陕西',
    },
    {
      label: '百姓健康系列栏目',
      value: '百姓健康系列栏目',
    },
    {
      label: '健康知识',
      value: '健康知识',
    },
    {
      label: '科普资料',
      value: '科普资料',
    },
    {
      label: '宣传活动',
      value: '宣传活动',
    },
    {
      label: '中医健康科普',
      value: '中医科普资料',
    },
  ],
}]
const options = ref<{ label: string, value: string }[]>([
  { label: '全部', value: '全部' },
  { label: '头条资讯', value: '头条资讯' },
  { label: '健康陕西', value: '健康陕西' },
  { label: '百姓健康系列栏目', value: '百姓健康系列栏目' },
  { label: '健康知识', value: '健康知识' },
  { label: '科普资料', value: '科普资料' },
  { label: '宣传活动', value: '宣传活动' },
  { label: '中医健康科普', value: '中医科普资料' },
])
optionType.value = route.query.type ? route.query.type as string : '全部'
inputVal.value = props.value
// 搜索
function onSearch() {
  showCondition.value = false
  searchValue.value = inputVal.value

  if (optionType.value === '全部') {
    if (filterModel.value) {
      if (filterModel.value.fclass) {
        if (!Array.isArray(filterModel.value.fclass)) {
          filterModel.value.fclass = [filterModel.value.fclass]
        }
      }
      if (filterModel.value.sscope) {
        if (!Array.isArray(filterModel.value.sscope)) {
          filterModel.value.sscope = [filterModel.value.sscope]
        }
      }
      navigateTo({
        path: `/peopleHealth/advancedSearch`,
        query: {
          data: searchValue.value,
          type: optionType.value,
          fclass: encode(filterModel.value),
        },
      })
    }
    else {
      navigateTo({
        path: `/peopleHealth/advancedSearch`,
        query: {
          data: searchValue.value,
          type: optionType.value,
        },
      })
    }
  }
  else {
    if (!filterModel.value) {
      console.log(123)
      // filterModel.value = { 'fclass': [optionType.value] }
      navigateTo({
        path: `/peopleHealth/advancedSearch`,
        query: {
          data: searchValue.value,
          type: optionType.value,
        },
      })
    }
    else {
      console.log(456)
      navigateTo({
        path: `/peopleHealth/advancedSearch`,
        query: {
          data: searchValue.value,
          type: optionType.value,
          fclass: encode(filterModel.value),
        },
      })
    }
  }
  // if (optionType.value !== '全部') {
  //     filterModel.value = { 'fclass': [optionType.value] }
  // } else {
  //     filterModel.value = ''
  // }
  emit('clickItem', inputVal.value, filterModel.value)
}
function clearInput() {
  inputVal.value = ''
}
function getHealthSxList() {
  getCategoryList({
    condition: [{
      colName: 'path_name',
      ruleType: 'like]',
      value: '健康知识%',
    }],
  }).then((res) => {
    res.data[0].children.forEach((item: any) => {
      item.label = item.classify_name
      item.value = ''
      item.key = item.classify_name
      item.options = item.children ? item.children : []
      item.children.forEach((element: any) => {
        element.label = element.classify_name
        element.value = element.classify_name
      })
    })
    list.value = res.data[0].children
  }).catch(() => {
  })
  getCategoryList({
    condition: [{
      colName: 'path_name',
      ruleType: 'like]',
      value: '健康陕西%',
    }],
  }).then((res) => {
    res.data[0].children.forEach((item: any) => {
      item.label = item.classify_name
      item.value = ''
      item.key = item.classify_name
      item.options = item.children ? item.children : []
      if (item.children) {
        item.children.forEach((element: any) => {
          element.label = element.classify_name
          element.value = element.classify_name
        })
      }
    })
    list1.value = res.data[0].children
  }).catch(() => {
  })
  getCategoryList({
    condition: [{
      colName: 'path_name',
      ruleType: 'like]',
      value: '百姓健康系列栏目%',
    }],
  }).then((res) => {
    res.data.forEach((item: any) => {
      item.label = item.classify_name
      item.value = ''
      item.key = item.classify_name
      item.options = item.children ? item.children : []
      if (item.children) {
        item.children.forEach((element: any) => {
          element.label = element.classify_name
          element.value = element.classify_name
        })
      }
    })
    list2.value = res.data
  }).catch(() => {
  })
  getCategoryList({
    condition: [{
      colName: 'path_name',
      ruleType: 'like]',
      value: '科普资料%',
    }],
  }).then((res) => {
    res.data[0].children.forEach((item: any) => {
      item.label = item.classify_name
      item.value = ''
      item.key = item.classify_name
      item.options = item.children ? item.children : []
      if (item.children) {
        item.children.forEach((element: any) => {
          element.label = element.classify_name
          element.value = element.classify_name
        })
      }
    })
    list3.value = res.data[0].children
  }).catch(() => {
  })
  getCategoryList({
    condition: [{
      colName: 'path_name',
      ruleType: 'like]',
      value: '宣传活动%',
    }],
  }).then((res) => {
    res.data.forEach((item: any) => {
      item.label = item.classify_name
      item.value = ''
      item.key = item.classify_name
      item.options = item.children ? item.children : []
      if (item.children) {
        item.children.forEach((element: any) => {
          element.label = element.classify_name
          element.value = element.classify_name
        })
      }
    })
    list4.value = res.data
  }).catch(() => {
  })
  getCategoryList({
    condition: [{
      colName: 'path_name',
      ruleType: 'like]',
      value: '专家库%',
    }],
  }).then((res) => {

  }).catch(() => {
  })
}

function onFilter(model: any) {
  console.log(model)
  if (optionType.value === '全部') {
    filterModel.value = model
  }
  else {
    for (const key in model) {
      if (model?.[key]) {
        const value = model[key]
        filterModel.value = { fclass: [optionType.value, key, value] }
      }
      else {
      }
    }
  }
}
function changeMenu() {
  if (optionType.value !== '全部') {
    filterModel.value = { fclass: [optionType.value] }
  }
  else {
    filterModel.value = ''
  }
}
getHealthSxList()
onMounted(() => {
  if (route.path === '/peopleHealth/advancedSearch') {
    showCondition.value = false
  }
})
</script>

<template>
  <div class="w-100%">
    <div class="w-100% px-20px pb-40px pt-10px">
      <div class="relative mb-10px flex items-center justify-center">
        <div class="right mr-15px h-50px flex flex-1 items-center bg-#fff py-5px pr-1px" border="1px solid #0E9472">
          <input v-model="inputVal" placeholder="请输入搜索信息" class="min-w-0 flex-1 indent-16px outline-none">
          <i
            class="i-ri:close-circle-line cursor-pointer text-gray opacity-0"
            :class="{ 'opacity-100': inputVal }" @click="clearInput"
          />
          <el-select
            v-model="optionType" style="width: 15%; color:#0E9472" class="borderless" clearable
            placeholder="请选择" @click.native="showCondition = true" @change="changeMenu"
          >
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div
          class="h-50px w-120px flex cursor-pointer items-center justify-center text-20px text-#FFF"
          style="background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,rgba(53,179,137,1) 89.45%);"
          @click="onSearch"
        >
          搜索
        </div>
      </div>
      <div v-show="showCondition" class="flex items-center justify-center">
        <PublicFilter
          v-if="optionType === '全部'" class="w-full bg-#FFF" :filter-list="filterList"
          :multi-select="true" @change="onFilter"
        />
        <PublicFilter
          v-else-if="optionType === '健康陕西'" class="bg-#FFF" :filter-list="list1"
          @change="onFilter"
        />
        <PublicFilter
          v-else-if="optionType === '健康知识'" class="bg-#FFF" :filter-list="list"
          @change="onFilter"
        />
        <PublicFilter
          v-else-if="optionType === '百姓健康系列栏目'" class="bg-#FFF" :filter-list="list2"
          @change="onFilter"
        />
        <PublicFilter
          v-else-if="optionType === '科普资料'" class="bg-#FFF" :filter-list="list3"
          @change="onFilter"
        />
        <PublicFilter
          v-else-if="optionType === '宣传活动'" class="bg-#FFF" :filter-list="list4"
          @change="onFilter"
        />
      </div>
    </div>

    <!-- <div class="min-h-100px">
      <div v-for="(item, index) in list" :key="index">
        {{ item.title_name }}
      </div>
    </div> -->
  </div>
</template>

<style>
.borderless .el-select__wrapper {
  border: none !important;
  /* 使用 !important 来确保覆盖默认样式 */
  box-shadow: none !important;
  text-align: right;
}
</style>
